<template>
  <view class="register-container">
    <view class="register-header">
      <view class="app-logo">
        <text class="logo-text">A</text>
      </view>
      <!-- <text class="register-title">创建账号</text> -->
      <text class="register-subtitle">欢迎加入我们</text>
    </view>

    <view class="register-form">
      <view class="form-item">
        <text class="form-label">账号</text>
        <input 
          v-model="form.username" 
          class="form-input" 
          type="text" 
          placeholder="请设置账号"
          :class="{'error': errors.username}"
          @input="clearError('username')"
        />
        <text v-if="errors.username" class="error-text">{{ errors.username }}</text>
      </view>

      <view class="form-item">
        <text class="form-label">密码</text>
        <input 
          v-model="form.password" 
          class="form-input" 
          type="password" 
          placeholder="请设置密码"
          :class="{'error': errors.password}"
          @input="clearError('password')"
          password
        />
        <text v-if="errors.password" class="error-text">{{ errors.password }}</text>
      </view>

      <view class="form-item">
        <text class="form-label">确认密码</text>
        <input 
          v-model="form.confirmPassword" 
          class="form-input" 
          type="password" 
          placeholder="请再次输入密码"
          :class="{'error': errors.confirmPassword}"
          @input="clearError('confirmPassword')"
          password
        />
        <text v-if="errors.confirmPassword" class="error-text">{{ errors.confirmPassword }}</text>
      </view>



      <button 
        class="register-btn" 
        :disabled="loading"
        @tap="handleRegister"
      >
        <text v-if="!loading">注册</text>
        <view v-else class="loading-container">
          <view class="loading-spinner"></view>
          <text>注册中...</text>
        </view>
      </button>
    </view>

    <view class="register-footer">
      <text class="footer-text">已有账号？</text>
      <text class="footer-link" @tap="goToLogin">立即登录</text>
    </view>
  </view>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { register } from '@/api'

const form = reactive({
  username: '',
  password: '',
  confirmPassword: ''
})

const errors = reactive({
  username: '',
  password: '',
  confirmPassword: ''
})

const loading = ref(false)

const validateForm = () => {
  let isValid = true
  errors.username = ''
  errors.password = ''
  errors.confirmPassword = ''

  if (!form.username.trim()) {
    errors.username = '请输入用户名'
    isValid = false
  } else if (form.username.length < 3 || form.username.length > 50) {
    errors.username = '用户名长度必须在3-50之间'
    isValid = false
  }

  if (!form.password.trim()) {
    errors.password = '请输入密码'
    isValid = false
  } else if (form.password.length < 6 || form.password.length > 50) {
    errors.password = '密码长度必须在6-50之间'
    isValid = false
  }

  if (!form.confirmPassword.trim()) {
    errors.confirmPassword = '请确认密码'
    isValid = false
  } else if (form.password !== form.confirmPassword) {
    errors.confirmPassword = '两次输入的密码不一致'
    isValid = false
  }

  return isValid
}

const clearError = (field) => {
  errors[field] = ''
}



const handleRegister = async () => {
  if (!validateForm()) return

  loading.value = true

  try {
    // 调用注册API
    await register({
      username: form.username,
      password: form.password,
      confirmPassword: form.confirmPassword
    })
    
    // 注册成功
    uni.showToast({
      title: '注册成功',
      icon: 'success',
      duration: 2000
    })

    // 跳转到登录页
    setTimeout(() => {
      uni.redirectTo({
        url: '/pages/login/login'
      })
    }, 2000)

  } catch (error) {
    // 注册失败，错误信息已由API自动处理
    console.error('注册失败:', error.message)
  } finally {
    loading.value = false
  }
}

const goToLogin = () => {
  uni.navigateTo({
    url: '/pages/login/login'
  })
}


</script>

<style lang="scss" scoped>
.register-container {
  min-height: 100vh;
  background: linear-gradient(180deg, #f7fafc 0%, #edf2f7 50%, #e2e8f0 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 120rpx 60rpx 0;
}

.register-header {
  text-align: center;
  margin-bottom: 80rpx;
}

.app-logo {
  width: 160rpx;
  height: 160rpx;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 40rpx;
  box-shadow: 0 20rpx 40rpx rgba(102, 126, 234, 0.3);
  animation: pulse 2s ease-in-out infinite;
}

.logo-text {
  color: #fff;
  font-size: 72rpx;
  font-weight: bold;
}

.register-title {
  font-size: 56rpx;
  font-weight: 700;
  color: #2d3748;
  margin-bottom: 16rpx;
}

.register-subtitle {
  font-size: 32rpx;
  color: #4a5568;
}

.register-form {
  width: 100%;
  max-width: 600rpx;
}

.form-item {
  margin-bottom: 48rpx;
  position: relative;
}

.form-label {
  display: block;
  font-size: 28rpx;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 16rpx;
}

.form-input {
  width: 100%;
  height: 100rpx;
  padding: 0 20rpx;
  border: 2rpx solid #e2e8f0;
  border-radius: 24rpx;
  font-size: 32rpx;
  background: #fff;
  transition: all 0.3s ease;
  
  &.error {
    border-color: #fc8181;
    background: #fff5f5;
  }
  
  &:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 6rpx rgba(102, 126, 234, 0.1);
  }
}

.error-text {
  color: #e53e3e;
  font-size: 24rpx;
  margin-top: 10rpx;
  display: block;
}



.register-btn {
  width: 100%;
  height: 112rpx;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border: none;
  border-radius: 28rpx;
  color: #fff;
  font-size: 32rpx;
  font-weight: 600;
  margin-top: 40rpx;
  box-shadow: 0 8rpx 30rpx rgba(102, 126, 234, 0.4);
  transition: all 0.3s ease;
  line-height: 112rpx;
  
  &:active {
    transform: translateY(2rpx);
    box-shadow: 0 4rpx 15rpx rgba(102, 126, 234, 0.5);
  }
  
  &:disabled {
    opacity: 0.7;
    transform: none;
  }
}

.loading-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-spinner {
  width: 40rpx;
  height: 40rpx;
  border: 4rpx solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s linear infinite;
  margin-right: 16rpx;
}

.register-footer {
  margin-top: 60rpx;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-text {
  color: #4a5568;
  font-size: 28rpx;
}

.footer-link {
  color: #667eea;
  font-size: 28rpx;
  font-weight: 600;
  margin-left: 10rpx;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

// 适配不同屏幕
@media screen and (max-width: 750rpx) {
  .register-container {
    padding: 80rpx 40rpx 0;
  }
  
  .app-logo {
    width: 120rpx;
    height: 120rpx;
    border-radius: 30rpx;
  }
  
  .logo-text {
    font-size: 60rpx;
  }
}
</style>